<template>
  <div>
    <codemirror ref="myCm" v-model="codeContent" :options="codeOptions" class="code"></codemirror>
  </div>
</template>

<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css' // css，必要
// 编辑的主题文件
import 'codemirror/theme/base16-light.css'
import 'codemirror/theme/eclipse.css'
import 'codemirror/theme/darcula.css'
import 'codemirror/addon/fold/foldgutter.css'
// 编辑器代码高亮css文件
import 'codemirror/addon/hint/show-hint.css'
require('codemirror/addon/fold/foldcode.js')
require('codemirror/addon/fold/foldgutter.js')
require('codemirror/addon/fold/brace-fold.js')
require('codemirror/addon/fold/xml-fold.js')
require('codemirror/addon/fold/indent-fold.js')
require('codemirror/addon/fold/markdown-fold.js')
require('codemirror/addon/fold/comment-fold.js')
require('codemirror/mode/htmlmixed/htmlmixed.js')
require('codemirror/addon/hint/html-hint.js')
export default {
  name: 'TableList',
  components: {
    codemirror
  },
  props: {
    mode: {
      type: String,
      default: 'text/html'
    }
  },
  data () {
    const _this = this
    return {
    mdl: {},
    theme: 'darcula',
    codeContent: '',
	  codeOptions: {
    lineNumbers: true,
    smartIndent: true,
    mode: this.mode,
    foldGutter: true,
    gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
    extraKeys: { 'Tab': 'autocomplete',
      'Ctrl-S': function () {
         _this.$emit('ctrls')
      }
    },
    theme: 'darcula'// 编辑器主题
	  }
    }
  },
  created () {

  },
  methods: {
     setCodeContent (content) {
       this.codeContent = content
     },
     getCodeContent (content) {
       return this.codeContent
     },
     clear () {
        this.$refs.myCm.codemirror.setValue('')
     }
  }
}
</script>

<style type="text/css">
  .CodeMirror {
    height: 600px !important;
    width: 100% !important;
    /* background-color: rgb(230, 225, 218) */
  }
/*  .CodeMirror-linenumbers{
    width: 10px !important;
  }
  .CodeMirror-foldgutter{
    width: 20px !important;
  } */

  .codeTemp {
    border: 1px dashed #e8e8e8;
    border-radius: 6px;

  }

  .v-contextmenu .v-contextmenu-submenu>.v-contextmenu.right {
    max-height: 300px;
    overflow-y: auto;
  }

  ::-webkit-scrollbar-track-piece {
  background-color:#2B2B2B;
  }
  ::-webkit-scrollbar {
  width:9px;
  height:9px;
  }
  ::-webkit-scrollbar-thumb {
  background-color:#2B2B2B;
  background-clip:padding-box;
  min-height:28px;
  }
  ::-webkit-scrollbar-thumb:hover {
  background-color:#2B2B2B;
  }
</style>
